<template>
    <div class="row mhgyl-wrap">
        <div class="mhgyl-title">
            猜你喜欢
        </div>
        <div class="row mhgyl-content">

            <div v-for="(v,i) of showImages" :key="i" class="mhgyl-contentWrap">
                <SingleGuess :guessInfo="v" :mhgyl="true">

                    <p class="mhgyl-p">{{v.title}}</p>
                    <div class="mhgyl-sg-infoWrap">
                        <b>￥{{v.price}}</b>
                        <span class="iconfont">{{v.cfav}}&#xe668;</span>
                    </div>
                </SingleGuess>
            </div>
        </div>
        
    </div>
  
</template>

<script>
export default {
    computed:{
        showImages(){
            return this.$store.getters.guessImages;
        }
    },
    mounted(){
        this.$store.dispatch("loadGuessData");
    }
  
}
</script>

<style lang="less">
    .mhgyl-wrap{
        @heights:0.8rem;
        >.mhgyl-title{
            color:#555;
            font-size: 0.25rem;
            text-align: center;
            height:@heights;
            line-height: @heights;
            background: url('../../static/image/upload.png') 50% 50% no-repeat ;
        }
        .mhgyl-content{
            background-color: #fff;
            display:flex;
            flex-flow: row wrap;
            justify-content: space-around;
            padding-top:0.3rem;
            >.mhgyl-contentWrap{
                width:46%;
                border-radius: 0.15rem 0.15rem 0 0;
            }
        }
    }

</style>
